<template>
    <!-- 显示评定等级的标题 -->
    小明的学习评定等级是：

    <!-- 
      v-if 条件判断：
      当type的值严格等于'A'时，渲染当前p标签
      条件判断使用严格相等(===)，既比较值也比较类型
    -->
    <p v-if="type === 'A'">
        优秀
    </p>

    <!-- 
      v-else-if 次级条件判断：
      当前面的v-if条件不成立时，检查此条件
      当type的值严格等于'B'时，渲染当前p标签
    -->
    <p v-else-if="type === 'B'">
        良好
    </p>

    <!-- 
      v-else 默认条件：
      当所有前面的条件都不成立时，渲染当前p标签
      不需要写判断条件，自动匹配剩余情况
    -->
    <p v-else>
        一般
    </p>

    <!-- 
      按钮组：点击不同按钮修改type的值
      分别将type设置为'A'、'B'、'C'，触发条件判断更新
    -->
    <button @click="type = 'A'">优秀</button>
    <button @click="type = 'B'">良好</button>
    <button @click="type = 'C'">一般</button>
</template>

<script setup>
// 导入ref函数用于创建响应式变量
import { ref } from 'vue'

// 创建响应式变量type，初始值为'B'
// 用于存储和切换评定等级类型
const type = ref('B')

/* 
  条件判断链说明：
  1. v-if、v-else-if、v-else必须连续使用，不能被其他元素打断
  2. 只会渲染第一个条件为true的元素，后续条件不再判断
  3. 适用于多分支条件判断场景，比多个独立v-if更高效
  4. 此处当type为'A'显示优秀，'B'显示良好，其他值(如'C')显示一般
*/
</script>
    